<template>
  <div>
    <h2 style="margin-bottom: 30px">编辑该项目信息</h2>
    <!-- 项目名称 -->
    <div class="block">项目名称</div>
    <el-input
      v-model="form.name"
      autocomplete="off"
      placeholder="请输入项目名称"
    ></el-input>

    <!-- 项目描述 -->
    <div class="block">项目描述(每一项描述以英文逗号分割)</div>
    <el-input
      v-model="form.descriptionText"
      autocomplete="off"
      placeholder="请输入项目描述"
    ></el-input>

    <!-- 项目链接 -->
    <div class="block">项目链接</div>
    <el-input
      v-model="form.url"
      autocomplete="off"
      placeholder="请输入项目链接"
    ></el-input>

    <!-- github地址 -->
    <div class="block">github地址</div>
    <el-input
      v-model="form.github"
      autocomplete="off"
      placeholder="请输入项目GitHub地址"
    ></el-input>

    <!-- 预览图地址 -->
    <Upload uploadTitle="预览图地址" v-model="form.thumb" />

    <!-- 排序等级 -->
    <div class="block">排序等级</div>
    <el-select v-model="form.order" placeholder="请选择等级">
      <el-option label="1" value="1"></el-option>
      <el-option label="2" value="2"></el-option>
      <el-option label="3" value="3"></el-option>
      <el-option label="4" value="4"></el-option>
      <el-option label="5" value="5"></el-option>
    </el-select>

    <div class="block" style="display: flex; justify-content: right">
      <el-button v-if="mode === 'edit'" @click="editProjectCancel"
        >取 消</el-button
      >
      <el-button type="primary" @click="editProjectConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import Upload from "@/components/Upload";
import { addProject, editProject, getProjects } from "@/api/project";
import { isURL } from "@/utils/isUrl"; //引用url正则验证
export default {
  props: ["mode"], //编辑模式或者添加模式
  data() {
    return {
      id: null, //当前项目id
      data: [], //所有项目
      projectInfo: null, //存储当前需要修改的项目的信息
      form: {
        name: "", //项目名称
        descriptionText: "", //项目描述
        description: [],
        url: "", //项目效果地址
        github: "", //项目的Github地址
        thumb: "", //项目的缩略图
        order: "1", //项目等级
      },
    };
  },
  created() {
    if (this.mode === "edit") {
      //项目信息需要进行回填
      //获取所有分类数据
      getProjects().then((res) => {
        this.data = res.data;
        //获取需要编辑的项目的id
        this.id = this.$route.params.id;

        for (var item of this.data) {
          if (this.id == item.id) {
            this.form = item;
            this.form.descriptionText = item.description.join(",");
          }
        }
      });
    }
  },
  components: {
    Upload,
  },
  methods: {
    //确定事件
    editProjectConfirm() {
      //需要传给服务器的数据
      let obj = {
        name: this.form.name,
        description: this.form.descriptionText.split(","),
        url: this.form.url,
        github: this.form.github,
        thumb: this.form.thumb,
        order: parseInt(this.form.order),
      };

      //判断所有信息是否已经填写完成
      if (
        obj.description.length > 0 &&
        obj.name &&
        isURL(obj.url) &&
        isURL(obj.github) &&
        obj.order &&
        obj.thumb
      ) {
        if (this.mode === "edit") {
          //发送修改请求
          editProject({ id: this.id, data: obj }).then((res) => {
            this.$message.success("修改项目成功");
            this.$router.push("/projectList");
          });
        } else {
          //发送添加项目请求
          addProject(obj).then((res) => {
            this.$message.success("添加项目成功");
            this.$router.push("/projectList"); //跳转到项目列表
          });
        }
      } else {
        this.$message.error("请完善项目所有消息");
      }
    },

    //取消事件
    editProjectCancel() {
      //返回到项目列表
      this.$router.push("/projectList");
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  margin: 15px 0;
  font-weight: 100;
}
</style>
